<template>
  <div class="right">
    <div class="head">
      <span class=" active ">
        组织架构管理
      </span>
    </div>
    <div class="btn-group">
      <span class="add" @click="showAdd = true">新 增</span>
    </div>
    <div class="project_main">
      <el-table
        ref="table"
        :data="listData"
        row-key="key"
        style="width: 100%;margin-bottom: 20px;"
        height="633"
        border
        stripe
        :header-cell-style="{
          textAlign: 'center',
        }"
        :cell-style="{
          textAlign: 'center',
        }"
        default-expand-all
        :tree-props="{ children: 'children' }"
      >
        <!-- :expand-row-keys="[]" -->
        <el-table-column label="一级机构" width="180">
          <template slot-scope="scope">
            <div
              @click="oneShow(scope.row.id, scope.row.cate)"
              style="cursor:default;"
              v-if="scope.row.cate == 1"
            >
              {{ scope.row.name }}
              <img
                :class="oneid == scope.row.id ? 'rotate180' : ''"
                src="~@img/system/down.png"
                alt
              />
            </div>
            <!-- <span v-else>
              >
            </span> -->
          </template>
        </el-table-column>
        <el-table-column label="二级部门">
          <template slot-scope="scope">
            <!-- @click.stop="twoshow(scope.row.id, scope.row.cate)" -->

            <div v-if="scope.row.cate == 2" style="cursor:default;">
              {{ scope.row.name }}
              <!-- <img
                :class="twoid == scope.row.id ? 'rotate180' : ''"
                src="~@img/system/down.png"
                alt
              /> -->
            </div>
            <div v-else>
              ---
            </div>
          </template>
        </el-table-column>
        <!-- <el-table-column label="三级级部门">
          <template slot-scope="scope">
            <div v-if="scope.row.cate == 3">
              {{ scope.row.name }}
            </div>
            <div v-else>
              ---
            </div>
          </template>
        </el-table-column> -->
        <el-table-column prop="pnums" label="部门人数"> </el-table-column>
        <el-table-column prop="charge" label="部门负责人"> </el-table-column>
        <el-table-column prop="charge_phone" label="负责人电话">
        </el-table-column>
        <el-table-column label="操作" width="280">
          <template slot-scope="scope">
            <div>
              <span
                v-if="scope.row.cate == 1"
                class="btn-span btn-bianji  btn-m-r-10"
                @click.stop="
                  $router.push({
                    name: 'systemglzuzhibianj2',
                    query: {
                      id: scope.row.id,
                      cate: scope.row.cate,
                      one: scope.row.name,
                      two: '',
                    },
                  })
                "
                >编辑</span
              >
              <span
                v-if="scope.row.cate == 2"
                class="btn-span btn-bianji  btn-m-r-10"
                @click.stop="
                  $router.push({
                    name: 'systemglzuzhibianj2',
                    query: {
                      id: scope.row.id,
                      cate: scope.row.cate,
                      one: scope.row.higher,
                      two: scope.row.name,
                    },
                  })
                "
                >编辑</span
              >
              <span
                v-if="scope.row.cate != 2"
                class="btn-span btn-add btn-m-r-10"
                @click="addSubIdCate(scope.row.id, scope.row.cate)"
                >新增下级部门</span
              >
              <span
                class="btn-span btn-del"
                @click="showDelDialog(scope.row.id, scope.row.cate)"
                >删除</span
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog
      class="del-dialog"
      title="删除提示"
      :visible.sync="showDel"
      @close="closeDel"
    >
      <div class="del-content">
        是否删除此机构或部门?
      </div>
      <div slot="footer" class="dialog-footer">
        <div class="qx" @click="closeDel">
          取消
        </div>
        <div class="qd" @click="deleteOrg">
          确 定
        </div>
      </div>
    </el-dialog>
    <el-dialog title="新增下级部门" :visible.sync="showSub" @close="closeSub">
      <div class="add-bm">
        <p>
          <span>部门名称</span>
          <el-input v-model="name" placeholder="请输入"></el-input>
        </p>
        <p>
          <span>部门人数</span>
          <el-input v-model="pnums" placeholder="请输入"></el-input>
        </p>
        <p>
          <span>部门负责人</span>
          <el-input v-model="charge" placeholder="请输入"></el-input>
        </p>
        <p>
          <span>负责人电话</span>
          <el-input v-model="charge_phone" placeholder="请输入"></el-input>
        </p>
      </div>
      <div slot="footer" class="dialog-footer">
        <div class="qx" @click="closeSub">
          取消
        </div>
        <div class="qd" @click="addSub">
          确 定
        </div>
      </div>
    </el-dialog>
    <el-dialog
      class="add-dialog"
      title="新增组织机构部门"
      :visible.sync="showAdd"
      @close="closeAdd"
    >
      <div class="add-content">
        <div class="flex-box ">
          <p class="auto">
            <span>组织机构名称：</span>
            <el-input v-model="zzname" placeholder="请输入"></el-input>
          </p>
          <!-- <p>
            <span>上级机构：</span>
            <el-select
              placeholder="请选择"
              v-model="industry"
              @change="labelchange($event, list1, 1)"
            >
              <el-option
                v-for="(item, index) in list1"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </p> -->
        </div>
        <div class="flex-box">
          <p class="auto">
            <span>机构负责人：</span>
            <el-input v-model="zzfzr" placeholder="请输入"></el-input>
          </p>
        </div>
        <div class="flex-box">
          <p class="auto">
            <span>负责人电话：</span>
            <el-input v-model="zzfzrdh" placeholder="请输入"></el-input>
          </p>
        </div>
        <!-- <div class="flex-box">
          <p>
            <span>统筹机构</span>
          </p>
          <ul class="xinzeng_jgoutc">
            <li v-for="(i, index) in list2" :key="index">
              <el-checkbox
                ref="checkbox"
                @change="handleCheckAllChange(i.value)"
              ></el-checkbox>
              {{ i.label }}
            </li>
          </ul>
        </div> -->
      </div>
      <div slot="footer" class="dialog-footer">
        <div class="qx" @click="closeAdd">
          取消
        </div>
        <div class="qd" @click="addOrg">
          确 定
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  organization,
  sectionGroup,
  uadOrg,
  addOrg,
  addSub,
  deleteOrg,
  downOrg,
} from "@/api/system";
export default {
  data() {
    return {
      delId: "",
      delCate: "",
      showDel: false,
      showSub: false,
      showAdd: false,
      subId: "",
      subCate: "",
      zzname: "",
      zzfzr: "",
      zzfzrdh: "",
      industry: "",
      list1: "",
      list2: "",
      checkedCities: "",
      arr: [],
      statu: "",
      show: false,
      page: 1,
      perpage: 10,
      listData: [],
      oneid: -1,
      twoid: -1,
      name: "", // # 新增机构或者部门名称
      pnums: "", //   # 机构人数
      charge: "", //  # 机构负责人
      charge_phone: "", // # 负责人电话
    };
  },
  created() {
    this.uadOrg();
    this.downOrg();
    this.organization();
  },
  methods: {
    load(tree, treeNode, resolve) {
      console.log(tree);
      console.log(treeNode);
      console.log(resolve);
    },
    closeAdd() {
      this.showAdd = false;
      this.zzname = "";
      this.industry = "";
      this.zzfzr = "";
      this.zzfzrdh = "";
      this.arr = [];
      // this.$refs["checkbox"].map((item) => {
      //   item.selfModel = false;
      // });
    },
    closeDel() {
      this.delId = "";
      this.delCate = "";
      this.showDel = false;
    },
    closeSub() {
      this.name = "";
      this.pnums = "";
      this.charge = "";
      this.charge_phone = "";
      this.subId = "";
      this.subCate = "";
      this.showSub = false;
    },

    // 一级下拉
    oneShow(id, cate) {
      if (this.oneid == id) {
        this.oneid = -1;
        this.two = -1;
        this.listData = [...this.listData].map((item) => {
          item.children = [];
          return item;
        });
        return;
      } else {
        this.oneid = id;
      }
      this.oneTwo(id, cate);
    },
    // twoshow(id, cate) {
    //   if (this.twoid == id) {
    //     this.twoid = -1;
    //     this.listData = [...this.listData].map((item) => {
    //       if (item.children && item.children.length != 0) {
    //         item.children = item.children.map((ele) => {
    //           ele.children = [];
    //           return ele;
    //         });
    //       }
    //       return item;
    //     });
    //     return;
    //   } else {
    //     this.twoid = id;
    //   }
    //   this.oneTwo(id, cate);
    // },

    async oneTwo(id, cate) {
      const res = await sectionGroup({
        id: id,
        cate: cate,
      });
      if (cate == 1) {
        this.$nextTick(() => {
          this.listData = [...this.listData].map((item) => {
            if (item.id == id) {
              item.key = item.cate + "_" + item.id;
              item.children = res.map((ele) => {
                ele.higher = item.name;
                ele.key = ele.cate + "_" + ele.id;
                return ele;
              });
            } else {
              item.children = [];
              item.key = item.cate + "_" + item.id;
            }
            return item;
          });
          console.log(this.listData);
        });
      }
    },
    async addOrg() {
      if (this.zzname == "") {
        this.$message({
          message: "请输入机构名称",
          type: "error",
        });
        return false;
      }
      const res = await addOrg({
        name: this.zzname,
        forg: this.statu,
        charge: this.zzfzr,
        charge_phone: this.zzfzrdh,
        sublist: this.arr,
      });
      if (res.code == 0) {
        this.$message({
          message: res.msg,
          type: "success",
        });
        this.showAdd = false;
        this.organization();
      } else {
        this.$message({
          message: res.msg,
          type: "error",
        });
      }
    },
    async organization() {
      const res = await organization({
        page: this.page,
        perpage: this.perpage,
      });
      this.listData = [...res.df].map((item) => {
        item.children = [];
        item.key = item.cate + "_" + item.id;
        return item;
      });
    },
    showDelDialog(id, cate) {
      this.delId = id;
      this.delCate = cate;
      this.showDel = true;
    },
    addSubIdCate(id, cate) {
      this.subId = id;
      this.subCate = cate;
      this.showSub = true;
    },
    async addSub() {
      if (
        this.name == "" ||
        this.pnums == "" ||
        this.charge == "" ||
        this.charge_phone == ""
      ) {
        this.$message({
          message: "请输入全部内容",
          type: "error",
        });
        return false;
      }
      const res = await addSub({
        id: this.subId, //   当前数据的id
        cate: this.subCate, //  # 当前数据的cate
        name: this.name, // # 新增机构或者部门名称
        pnums: this.pnums, //   # 机构人数
        charge: this.charge, //  # 机构负责人
        charge_phone: this.charge_phone, // # 负责人电话
      });
      if (res.code == 0) {
        this.$message({
          message: res.msg,
          type: "success",
        });
        this.oneTwo(this.subId, this.subCate);
        this.subId = "";
        this.subCate = "";
        this.showSub = false;
      } else {
        this.$message({
          message: res.msg,
          type: "error",
        });
      }
    },
    async uadOrg() {
      const res = await uadOrg({});
      this.list1 = res;
    },
    async downOrg() {
      const res = await downOrg({ id: this.statu });
      this.list2 = res;
    },
    // deleteOrg
    async deleteOrg(id, cate) {
      const res = await deleteOrg({
        id: this.delId,
        cate: this.delCate,
      });
      if (res.code == 0) {
        this.$message({
          message: res.msg,
          type: "success",
        });
        console.log(cate);
        console.log(this.oneid);
        console.log(this.twoid);
        if (cate == 2) {
          this.oneTwo(this.oneid, 1);
        }
        if (cate == 3) {
          this.oneTwo(this.twoid, 2);
        }
        this.closeDel();
      } else {
        this.$message({
          message: res.msg,
          type: "error",
        });
      }
      this.organization();
    },
    handleCheckAllChange(e) {
      this.arr.push(e);
    },

    labelchange(e, objx, num) {
      switch (num) {
        case 1:
          this.statu = e;
          this.downOrg();
          break;
        case 2:
          this.organization = e;
          this.fieldt();
          break;
        case 3:
          this.stageid = e;
          break;
        case 4:
          this.rank = e;
          break;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.right {
  background: #fff;
  width: 100%;
  height: 100%;
  overflow: hidden;
  table td {
    font-size: 14px;
    line-height: 44px;
  }
  .project_main {
    padding: 0 20px;
    height: calc(100% - 196px) !important;
    overflow: hidden !important;
    overflow-y: scroll;
    zoom: 1;

    .project_tables {
      font-size: 14px;
      line-height: 44px;

      tr.tit_bg {
        background: #f3f6fb;

        td {
          border-top: 1px solid #eee;
          border-bottom: 1px solid #eee;
        }
      }
      span {
        margin: 0 2%;
      }
      .chengzi_btn {
        color: #fe6a00;
        cursor: pointer;
      }
      .lvzi_btn {
        color: #2cb54c;
        cursor: pointer;
      }
      .zizi_btn {
        color: #135de6;
        cursor: pointer;
      }
      .redzi_btn {
        color: #e51313;
        cursor: pointer;
      }
      .bluezi_btn {
        color: #0ebbf3;
        cursor: pointer;
      }
      .huangzi_btn {
        color: #e69554;
        cursor: pointer;
      }

      /deep/.el-button {
        background: none;
        padding: 0;
        border: 0;
      }
    }
    .project_tables td:first-child {
      text-align: left;
      padding-left: 20px;
    }
    .project_tables td {
      border-bottom: 1px solid #eee;
    }
    .project_tables td img {
      margin-right: 5px;
    }

    //分页
    /deep/.el-pagination {
      float: right;
      margin-top: 20px;
    }
    /deep/.btn-prev {
      border: 1px solid #888;
      padding: 0;
    }
    /deep/.btn-next {
      border: 1px solid #888;
      padding: 0;
    }
    /deep/.el-pager li {
      border: 1px solid #888;
      margin: 0 5px;
    }
    /deep/.el-pager li.active,
    /deep/.el-pager li:hover {
      border: 1px solid #fe6a00;
      color: #fe6a00;
    }

    //分页end
  }
}

.dispatch {
  width: 100%;
  height: 138px;
  background: #ffffff;
  border: 1px solid #eeeeee;
  z-index: 99;
  margin-top: 15px;
  ul {
    width: 100%;
    height: 138px;
    padding: 10px;
    overflow: auto;
    li {
      list-style: none;
      cursor: pointer;
      height: 30px;
      line-height: 20px;
      width: 100%;
      padding: 5px;
      &:hover {
        background-color: #eee;
        color: #e69554;
      }
      &.active {
        color: #e69554;
        background-color: #eee;
      }
    }
  }
}
.btn {
  text-align: center;
  margin: 20px 0 15px 0;
  #but1 {
    width: 72px;
    height: 30px;
    background: #fe6a00;
    border: 1px solid #fe6a00;
    border-radius: 3px;
    font-size: 14px;
    font-weight: 400;
    color: #ffffff;
    line-height: 30px;
    padding: 0;
  }
  #but2 {
    width: 72px;
    height: 30px;
    background: #ffffff;
    border: 1px solid #fe6a00;
    border-radius: 3px;
    font-size: 14px;
    font-weight: 400;
    color: #fe6a00;
    line-height: 30px;
    padding: 0;
  }
}
.branch {
  overflow: auto;
  ul {
    height: auto;
  }
}
.el-collapse-item {
  padding: 0 10px;
}
.project_tables /deep/ .el-checkbox__label {
  display: none;
}

.xinzeng_xiajitc {
  margin-top: 5px;
  overflow: hidden;
  zoom: 1;
}
.xinzeng_xiajitc li {
  list-style: none;
  margin-bottom: 10px;
  overflow: hidden;
  zoom: 1;
}
.xinzeng_xiajitc li span {
  display: block;
  width: 82px;
  float: left;
  height: 30px;
  line-height: 30px;
}
.xinzeng_xiajitc li .el-input {
  width: 206px;
}
// .xinzeng_xiajitc li .el-select {
//   width: 206px;
// }
.tc_tit {
  margin-bottom: 5px;
}
.xinzeng_jgoutc {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  width: calc(100% - 120px);
  padding: 30px 25px 0;
  height: 110px;
  background: #f7f7f7;
  border-radius: 8px;
  overflow-y: auto;
  li {
    display: inline-block;
    margin: 0 30px 0 0 !important;
  }
}
.xinzeng_jgoutc .el-checkbox {
  margin-right: 5px;
}
.delt_p {
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  margin-top: 25px;
}

/deep/.el-collapse-item__content {
  padding-bottom: 0;
}
/deep/.el-collapse-item__arrow {
  display: none;
}
/deep/.el-button {
  border: 0;
}
/deep/.el-input {
  width: 100%;
  height: 30px;
  input {
    border-radius: 0;
    width: 100%;
    height: 30px;
    color: #333;
    background: #ffffff;
    border: 1px solid #dddddd;
  }
  ::-webkit-input-placeholder {
    color: #333;
  }
  // /deep/.el-icon-circle-close {
  //   background: url("../../assets/merchantsradar/cuo.png") 50% 50% no-repeat;
  // }
  .el-icon-circle-close:before {
    content: "";
  }
}
// /deep/.el-select {
//   width: 70%;
//   height: 30px;
//   input {
//     width: 100%;
//     height: 30px;
//     background: #ffffff;
//     border: 1px solid #dddddd;
//   }
//   /deep/.el-input__icon {
//     line-height: 30px !important;
//   }
// }
// /deep/ .el-checkbox__label {
//   display: none;
// }
// /deep/.el-textarea__inner:focus {
//   border-color: #fe6a00;
// }
// /deep/.el-checkbox__input.is-checked .el-checkbox__inner,
// .el-checkbox__input.is-indeterminate .el-checkbox__inner {
//   background-color: #fe6a00;
//   border-color: #fe6a00;
// }
// .box {
//   width: 100%;
//   > ul {
//     width: 100%;
//     border-bottom: 1px solid #dddddd;
//     transition: all 0.25s;
//     height: auto;
//     cursor: pointer;
//     li {
//       float: left;
//       height: 44px;
//     }
//     img {
//       margin-right: 3px;
//     }
//     &:nth-child(2n) {
//       background-color: #f3f6fb;
//     }
//     > ul {
//       padding-left: 40px;

//       > ul {
//         padding-left: 20px;
//       }
//     }
//     ul:last-child {
//       border: none;
//     }
//   }
// }
.rotate180 {
  transition: transform 0.5s;
  transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  /* IE 9 */
  -moz-transform: rotate(180deg);
  /* Firefox */
  -webkit-transform: rotate(180deg);
  /* Safari 和 Chrome */
  -o-transform: rotate(180deg);
  /* Opera */
}

.head {
  padding-left: 20px;
  height: 80px;
  line-height: 80px;
  font-size: 20px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #446db3;
  background: #ffffff;
  box-shadow: 0px 2px 6px 0px rgba(4, 0, 0, 0.1);
  text-align: left;
  span {
    margin-right: 75px;
    display: inline-block;
    height: 80px;
    font-size: 20px;
    font-weight: 400;
    color: #333333;
    cursor: default;
  }
  span.active {
    font-weight: bold;
    color: #446db3;
    border-bottom: 4px solid #446db3;
  }
}
.btn-group {
  margin: 30px 0 30px 20px;
  text-align: left;

  span {
    display: inline-block;
    width: 120px;
    height: 38px;
    line-height: 38px;
    text-align: center;
    background: #f89718;
    border-radius: 4px;
    font-size: 16px;
    color: #ffffff;
    cursor: default;
  }
  .add {
    margin-right: 30px;
  }
}
/deep/ .el-table--border th.el-table__cell {
  padding: 0;
  height: 48px;
  background: #f5f6f7;
  border-right: 4px solid #fff;
  font-size: 14px;
  font-weight: bold;
  color: #333333;
}

/deep/ .el-table [class*="el-table__row--level"] .el-table__expand-icon {
  display: none;
}
/deep/ .el-table__indent {
  display: none;
}
/deep/ .el-table--enable-row-transition .el-table__body td.el-table__cell {
  padding: 0;
  height: 48px;
  line-height: 48px;
  border: none;
  background: #f9fafb;
  border-bottom: 4px solid #fff;
}
/deep/
  .el-table--striped
  .el-table__body
  tr.el-table__row--striped
  td.el-table__cell {
  background: #f5f6f7;
}
/deep/ .el-table--border {
  border: none;
}
.btn-span {
  display: inline-block;
  height: 24px;
  line-height: 24px;
  font-size: 14px;
  color: #ffffff;
  border-radius: 4px;
  vertical-align: middle;
  cursor: default;
}
.btn-bianji {
  width: 50px;
  background: #5889dc;
}
.btn-add {
  width: 100px;
  background: #f89718;
}
.btn-del {
  width: 50px;
  background: #f15847;
}
.btn-m-r-10 {
  margin-right: 10px;
}

/deep/ .el-dialog {
  padding: 0 46px;
  width: 720px !important;
  height: 580px !important;
  top: 50%;
  margin-top: -290px !important;
  box-shadow: 0px 5px 50px 0px rgba(186, 186, 186, 0.5);
  border-radius: 20px;
}
/deep/ .del-dialog .el-dialog {
  padding: 0 46px;
  width: 720px !important;
  height: 300px !important;
  top: 50%;
  margin-top: -150px !important;
  box-shadow: 0px 5px 50px 0px rgba(186, 186, 186, 0.5);
  border-radius: 20px;
}
.del-content {
  font-size: 22px;
}
.add-bm {
  padding: 20px 52px;
  p {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    height: 54px;
    line-height: 54px;
    span {
      font-size: 18px;
      color: #333333;
    }
  }
  /deep/ .el-input,
  /deep/ .el-input__inner {
    width: 350px;
    height: 54px;
    line-height: 54px;
    background: #f7f7f7;
    border-radius: 8px;
    border: 0;
    font-size: 18px;
    color: #333333;
  }
}
/deep/.add-dialog .el-dialog {
  padding: 0 48px;
  width: 720px !important;
  height: 580px !important;
  top: 50%;
  margin-top: -290px !important;
}
/deep/ .add-dialog .el-dialog__body {
  padding: 50px 0;
}
.auto {
  margin: 0 auto;
}
/deep/ .add-content .flex-box {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  p > span {
    display: inline-block;
    width: 140px;
    text-align: left;
    font-size: 18px;
    color: #333333;
  }
  .el-input {
    width: 350px;
    height: 54px;
    line-height: 54px;
    background: #f7f7f7;
    border-radius: 8px;
  }
  .el-input__inner {
    width: 350px;
    height: 54px;
    background: #f7f7f7;
    line-height: 54px;
    border-radius: 8px;
    border: none;
    font-size: 18px;
    color: #333333;
  }
  .el-form-item__label {
    width: 130px !important;
    font-size: 18px;
    color: rgba(51, 51, 51, 1);
  }
  .el-form-item__content {
    margin-left: 130px !important;
  }
  // & > div {
  //   flex: 0 0 33%;
  // }
}
.tipss {
  text-align: right;
  font-size: 14px;
  color: #999999;
  line-height: 33px;
  span {
    color: #ff0000;
  }
}
/deep/ .el-dialog__header {
  padding-top: 30px;
  height: 100px;
  line-height: 70px;
  border-bottom: 1px dashed #ddd;

  .el-dialog__title {
    font-size: 30px;
    font-weight: bold;
    color: #446db3;
  }
}

/deep/.el-dialog__body {
  padding: 30px 20px;
  .tips {
    font-size: 24px;
  }
  li {
    margin: 0 auto;
    // span {
    //   width: 80px !important;
    //   padding: 0 !important;
    //   font-size: 18px;
    //   color: #333333;
    // }
    .el-input__inner {
      width: 350px;
      height: 54px;
      background: #f7f7f7 !important;
      line-height: 54px;
      border-radius: 8px;
      border: none !important;
    }
  }
}
/deep/.dialog-footer {
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  justify-content: space-evenly;
  .qx {
    display: inline-block;
    width: 247px;
    height: 48px;
    line-height: 44px;
    border: 2px solid #446db3;
    border-radius: 10px;
    font-size: 26px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #446db3;
    text-align: center;
    cursor: default;
  }
  .qd {
    display: inline-block;
    width: 247px;
    height: 48px;
    line-height: 44px;
    background: #446db3;
    box-shadow: 0px 2px 5px 0px rgba(68, 109, 179, 0.5);
    border: 2px solid #446db3;
    border-radius: 10px;
    font-size: 26px;
    font-weight: bold;
    color: #ffffff;
    text-align: center;
    cursor: default;
  }
}
/deep/ .el-icon-close:before {
  content: "";
  display: block;
  width: 21px;
  height: 20px;
  background: url("~@img/system/icon-close.png");
}
/deep/.el-dialog__headerbtn {
  right: 50px;
}
/deep/ .el-table__header-wrapper {
  margin-bottom: 4px;
}
/deep/ .el-table::before,
/deep/ .el-table::after {
  width: 0 !important;
}
/deep/ .el-table--border::after,
/deep/ .el-table--group::after {
  width: 0 !important;
}
/deep/ .el-table__row td:last-of-type {
  border-right: 4px solid #fff !important;
}

/*
  *常用电脑尺寸  1680 * 900
  *              1536 * 864
  *              1440 * 900
  *ipad pro      1366 * 1024
  *ipad mini     1024 * 768
  *ipad          1024 * 768
 */
/*分辨率低于1680，采用下面的样式*/
@media screen and (max-device-width: 1680px) {
  /deep/ .el-table--scrollable-y .el-table__body-wrapper {
    height: 520px !important;
  }
}
/*分辨率低于1536，采用下面的样式*/
@media screen and (max-device-width: 1536px) {
  /deep/ .el-table--scrollable-y .el-table__body-wrapper {
    height: 480px !important;
  }
}
/*分辨率低于1440，采用下面的样式*/
@media screen and (max-device-width: 1440px) {
  /deep/ .el-table--scrollable-y .el-table__body-wrapper {
    height: 500px !important;
  }
}
/*分辨率低于1366，采用下面的样式*/
@media screen and (max-device-width: 1366px) {
  /deep/ .el-table--scrollable-y .el-table__body-wrapper {
    height: 600px !important;
  }
}
/*分辨率低于1180，采用下面的样式*/
@media screen and (max-device-width: 1180px) {
  /deep/ .el-table--scrollable-y .el-table__body-wrapper {
    height: 460px !important;
  }
}
/*分辨率低于1024，采用下面的样式*/
@media screen and (max-device-width: 1024px) {
  /deep/ .el-table--scrollable-y .el-table__body-wrapper {
    height: 400px !important;
  }
}
</style>
